{% stylesheet %}

.block_gallery {
  padding: 80px 0;
  background-color: var(--bg-color);
  overflow: hidden;
}
.block_gallery .content_wrap {
  position: relative;
  cursor: none;
}

.block_gallery .swiper {
  position: relative;
  padding-bottom: 40px;
}

.block_gallery .swiper .swiper-slide {
  width: auto;
  display: table;
}

.block_gallery .swiper .swiper-slide img {
  height: 30vw;
}

@media screen and (max-width: 767px) {
  .block_gallery .swiper .swiper-slide img {
    height: 370px;
  }
}

.block_gallery .swiper .swiper-slide .text_box {
  display: table-caption;
  caption-side: bottom;
  margin-top: 16px;
}

.block_gallery .swiper .swiper-scrollbar {
  height: 2px;
}

.block_gallery .coustom_drag_cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  visibility: hidden;
  pointer-events: none;
  transition: visibility .15s linear;
}

.block_gallery .coustom_drag_cursor.show {
  visibility: visible;
}

.block_gallery .coustom_drag_cursor.show svg {
  transform: scale(1);
  opacity: 1;
}

.block_gallery .coustom_drag_cursor svg {
  height: 60px;
  width: 60px;
  transform: scale(0.5);
  opacity: 0;
  transition: transform .15s ease-in-out, opacity .15s ease-in-out;
}

.block_gallery .coustom_drag_cursor svg path:nth-child(1) {
  fill: var(--main_color);
}

.block_gallery .coustom_drag_cursor svg path:nth-child(2) {
  stroke: var(--page_background_color);
}

{% endstylesheet %}

{% assign blockId = block_id | default : section.block_id %}
{% assign data = section.settings %}

{% if data.is_fill %}
  {% assign container = "full_container_wrapper" %}
{% else %}
  {% assign container = "container_wrapper" %}
{% endif %}
<div class="block_gallery" style="--bg-color: {{data.bg_color}};">
   <div class="content_wrap" id="block_gallery-{{blockId}}">
     <div class="{{container}}">
        {% include 'block_title', title:data.block_title , detail:data.block_detail %}
        <div class="swiper" id="block_gallery_swiper_{{blockId}}" style="{% if data.is_fill %}overflow:visible;{% else %}overflow: hidden;{% endif %}">
            <ul class="swiper-wrapper">
                {% for block in section.blocks %}
                <li class="swiper-slide">
                    <div class="img_box">
        							{% include 'lazy_img',  src:block.image.src,  alt:block.image.alt %}
                    </div>
                    {% if block.detail != '' %}
                    <div class="text_box">
                        {{ block.detail }}
                    </div>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            <div class="swiper-scrollbar" id="block_gallery_swiper_scrollbar_{{blockId}}"></div>
           
        </div>
    </div>
    <div class="coustom_drag_cursor" id="coustom_drag_cursor_{{blockId}}">
        <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
            <path d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60z"></path>
            <path d="M46 50L36 60l10 10M74 50l10 10-10 10" stroke-width="4"></path>
        </svg>
    </div>
   </div>
</div>
<script type="text/javascript">
$(function () {
    let x = 0
    let y = 0
  let swiper = new Swiper("#block_gallery_swiper_{{blockId}}", {
    slidesPerView: 'auto',
    spaceBetween: 30,
    freeMode: true,
    scrollbar: {
      el: "#block_gallery_swiper_scrollbar_{{blockId}}",
      hide: false,
    },
    on: {
        touchMove: function(){
            $("#coustom_drag_cursor_{{blockId}}").css("transform",`translate3d(${x + this.touches.diff}px,${y + (this.touches.currentY - this.touches.startY)}px,0)`)
        },
        touchEnd: function() {
            x = x + this.touches.diff
            y = y + (this.touches.currentY - this.touches.startY)
        }
    }
  });
  $("#block_gallery_swiper_{{blockId}} img").on('load',function() {
    swiper.update()
  })

  if($(window).width() > 768) {
    $("#block_gallery-{{blockId}}").on("mousemove", function(e) {
        e.stopPropagation()
        x = e.pageX - 30
        y = e.pageY - $(this).offset()['top'] - 30
        if(y < $(this).height() && y > -60){
          $("#coustom_drag_cursor_{{blockId}}").css("transform",`translate3d(${x}px,${y}px,0)`)
        }
        
      })
      $("#block_gallery-{{blockId}}").on("mouseenter", function(e) {
        $("#coustom_drag_cursor_{{blockId}}").addClass('show')
      })
      $("#block_gallery-{{blockId}}").on("mouseleave", function(e) {
        $("#coustom_drag_cursor_{{blockId}}").removeClass('show')
      })
  }
});
</script>
{% schema %}
{
	"name": {
		"zh_CN": "画廊",
		"en_US": "Gallery"
	},
	"tag": "",
	"class": "block_gallery",
	"is_global": false,
	"settings": [
		{
			"type": "card_header",
			"id": "",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否铺满",
				"en_US": "Is it covered?"
			},
			"default": true,
			"id": "is_fill"
		},
		{
			"type": "card_input",
			"id": "block_title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Timeline"
		},
		{
			"type": "card_text_editor",
			"id": "block_detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": ""
		},
		{
			"type": "card_color",
			"id": "bg_color",
			"label": {
				"zh_CN": "背景颜色颜色",
				"en_US": "Background color"
			},
			"default": "#F5F5F5"
		},
		{
			"type": "card_header",
			"id": "",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "画廊列表",
				"en_US": "Gallery list"
			},
			"type": "list-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度1000px以上，高度自适应",
						"en_US": "Recommended width more than 1000px, height adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "detail",
					"default": "The gallery description"
				}
			]
		}
	],
	"default": {
		"settings": {
			"block_title": "Timeline",
			"block_detail": "",
			"is_fill": false,
			"bg_color": "#F5F5F5"
		},
		"blocks": [
			{
				"detail": "The gallery description",
				"image": {
					"src": "",
					"alt": ""
				},
				"block_type": "list-item"
			},
			{
				"detail": "The gallery description",
				"image": {
					"src": "",
					"alt": ""
				},
				"block_type": "list-item"
			},
			{
				"detail": "The gallery description",
				"image": {
					"src": "",
					"alt": ""
				},
				"block_type": "list-item"
			}
		]
	},
	"icon": "icon-hualang"
}
{% endschema %}